//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

/* ==========================================================================
   Navigation

//== Regions
//## Behavior in the different regions
========================================================================== */
// When used in topbar
.region-topbar {
    .mx-navbar {
        background-color: $navtopbar-bg;
        ul.nav {
            /* Navigation item */
            & > li.mx-navbar-item > a {
                color: $navtopbar-color;
                font-size: $navtopbar-font-size;

                /* Dropdown arrow */
                .caret {
                    border-top-color: $navtopbar-color;
                    border-bottom-color: $navtopbar-color;
                }
                &:hover,
                &:focus,
                &.active {
                    color: $navtopbar-color-hover;
                    background-color: $navtopbar-bg-hover;
                    .caret {
                        border-top-color: $navtopbar-color-active;
                        border-bottom-color: $navtopbar-color-active;
                    }
                }
                &.active {
                    color: $navtopbar-color-active;
                    background-color: $navtopbar-bg-active;
                }

                /* Dropdown */
                .mx-navbar-submenu::before {
                    border-color: transparent transparent $navtopbar-border-color transparent;
                }

                // Image
                .glyphicon {
                    font-size: $navtopbar-glyph-size;
                }
            }

            /* When hovering or the dropdown is open */
            & > .mx-navbar-item > a:hover,
            & > .mx-navbar-item > a:focus,
            & > .mx-navbar-item.active a,
            & > .mx-navbar-item.open > a,
            & > .mx-navbar-item.open > a:hover,
            & > .mx-navbar-item.open > a:focus {
                color: $navtopbar-color-hover;
                background-color: $navtopbar-bg-hover;
                .caret {
                    border-top-color: $navtopbar-color-hover;
                    border-bottom-color: $navtopbar-color-hover;
                }
            }
            & > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a {
                color: $navtopbar-sub-color-active;
                background-color: $navtopbar-sub-bg-active;
                .caret {
                    border-top-color: $navtopbar-sub-color-active;
                    border-bottom-color: $navtopbar-sub-color-active;
                }
            }
        }
        @media (max-width: $screen-md) {
            ul.nav > li.mx-navbar-item > a {
            }
            .mx-navbar-item.open .dropdown-menu {
                background-color: $navtopbar-sub-bg;
                & > li.mx-navbar-subitem > a {
                    color: $navtopbar-sub-color;
                    font-size: $navtopbar-sub-font-size;
                    &:hover,
                    &:focus {
                        color: $navtopbar-sub-color-hover;
                        background-color: $navtopbar-sub-bg-hover;
                    }
                    &.active {
                        color: $navtopbar-sub-color-active;
                        background-color: $navtopbar-sub-bg-active;
                    }
                }
            }
        }
    }
}

// When used in sidebar
.region-sidebar {
    .mx-navbar {
        background-color: $navsidebar-bg;
        ul.nav {
            /* Navigation item */
            & > li.mx-navbar-item > a {
                color: $navsidebar-color;
                font-size: $navsidebar-font-size;

                /* Dropdown arrow */
                .caret {
                    border-top-color: $navsidebar-color;
                    border-bottom-color: $navsidebar-color;
                }
                &:hover,
                &:focus,
                &.active {
                    color: $navsidebar-color-hover;
                    background-color: $navsidebar-bg-hover;
                    .caret {
                        border-top-color: $navsidebar-color-active;
                        border-bottom-color: $navsidebar-color-active;
                    }
                }
                &.active {
                    color: $navsidebar-color-active;
                    background-color: $navsidebar-bg-active;
                }

                /* Dropdown */
                .mx-navbar-submenu::before {
                    border-color: transparent transparent $navsidebar-border-color transparent;
                }

                // Image
                .glyphicon {
                    font-size: $navsidebar-glyph-size;
                }
            }

            /* When hovering or the dropdown is open */
            & > .mx-navbar-item > a:hover,
            & > .mx-navbar-item > a:focus,
            & > .mx-navbar-item.active a,
            & > .mx-navbar-item.open > a,
            & > .mx-navbar-item.open > a:hover,
            & > .mx-navbar-item.open > a:focus {
                color: $navsidebar-color-hover;
                background-color: $navsidebar-bg-hover;
                .caret {
                    border-top-color: $navsidebar-color-hover;
                    border-bottom-color: $navsidebar-color-hover;
                }
            }
            & > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a {
                color: $navsidebar-sub-color-active;
                background-color: $navsidebar-sub-bg-active;
                .caret {
                    border-top-color: $navsidebar-sub-color-active;
                    border-bottom-color: $navsidebar-sub-color-active;
                }
            }
        }
        @media (max-width: $screen-md) {
            ul.nav > li.mx-navbar-item > a {
            }
            .mx-navbar-item.open .dropdown-menu {
                background-color: $navtopbar-sub-bg;
                & > li.mx-navbar-subitem > a {
                    color: $navsidebar-sub-color;
                    font-size: $navsidebar-sub-font-size;
                    &:hover,
                    &:focus {
                        color: $navsidebar-sub-color-hover;
                        background-color: $navsidebar-sub-bg-hover;
                    }
                    &.active {
                        color: $navsidebar-sub-color-active;
                        background-color: $navsidebar-sub-bg-active;
                    }
                }
            }
        }
    }
}
